<template>
    <view class="page">
        <!-- 搜索 -->
        <view class="search_box">
            <view class="search_left_box">
                <u-search shape="round" height="76" placeholder="输入活动口令" placeholder-color="#BFBFBF" v-model="keyword"
                    bgColor="#393834" :showAction="false"></u-search>
            </view>
            <view class="search_rt_box">
                <u-icon name="search" color="#F8B857" size="50" @click="searchBtn"></u-icon>
            </view>
        </view>
        <view style="height:92rpx;"></view>
        <view class="contions_box">
            <view class="contions_one_box" v-for="(item, index) in roomList" :key="index">
                <view class="top_box">
                    <view class="official_box" v-if="item.is_official == 1">官方</view>
                    <view class="header_box">
                        <image :src="item.avatar" mode="scaleToFill" />
                    </view>
                </view>
                <view class="house_name_box">{{ item.description }}</view>
                <view class="house_flame_box">
                    <view class="flame_box">
                        <view class="house_flame_image_box">
                            <image
                                src="https://new.qingfentool.vip/upload/image/20230814/89e69cb86a65c071a6fce6c7b4ba8a07.png"
                                mode="scaleToFill" />
                        </view>
                        <view class="house_flame_text_box">{{ item.popularity }}</view>
                    </view>
                    <view class="sm_box">

                        <view class="box_image_box">
                            <image
                                src="https://new.qingfentool.vip/upload/image/20230814/ee568fef6547453e6924002cfd8845da.png"
                                mode="scaleToFill" />
                        </view>
                        <view class="box_text_box">{{ item.num }}</view>
                    </view>
                </view>
                <view class="garden_box">
                    <view class="sm_box" v-for="(items, indexs) in item.pics" :key="indexs">
                        <image :src="items" mode="scaleToFill" />
                    </view>
                </view>
                <view class="jion_box" @click="jionHouse(item)">加入房间</view>
            </view>
            <view class="bottom_box">
                <view class="z_left_box" v-for="(item, index) in bottomList" :key="index">
                    <view class="createRoom_box">
                        <view class="jiahao_box">
                            <image :src="item.image" mode="scaleToFill" />
                        </view>
                        <view class="create_box" @click="funBtn(item)">{{ item.text }}</view>
                    </view>
                </view>
            </view>
        </view>
        <view style="height:120rpx;"></view>

        <uni-popup mode="center" ref="kefuTc" border-radius="20" :mask-click="false">
            <view class="kefu_box">
                <view class="title_box">大王赏app客服</view>
                <view class="erweima_box">
                    <image
                        :src="kefuImage"
                        mode="scaleToFill"
                    />
                </view>
                <view class="wzd_box" @click="zdlbBtn">知道了</view>
            </view>
        </uni-popup>
    </view>
</template>
<script>
export default {
    data() {
        return {
            keyword: '',
            bottomList: [//底部按钮
                {
                    id: 1,
                    image: "https://new.qingfentool.vip/upload/image/20230814/cae1ce6ec6144bb996998062db412fcf.png",
                    text: "创建房间",
                    url: '/housingfolder/create'
                },
                {
                    id: 2,
                    image: "https://new.qingfentool.vip/upload/image/20230814/ab5e7aed86a2027694eaab039dcafdc1.png",
                    text: "创建记录",
                    url: '/housingfolder/Recordset'
                },
                {
                    id: 3,
                    image: "https://new.qingfentool.vip/upload/image/20230814/56f2ba7d1d8bc3986a719d7309b9a91b.png",
                    text: "中奖记录",
                    url: '/housingfolder/prize'
                },
                {
                    id: 4,
                    image: "https://new.qingfentool.vip/upload/image/20230814/d04a23b0b94f465f6e0a43663d0a0ef0.png",
                    text: "获取口令",
                }
            ],
            roomList: [],//房间列表
            kefuImage:'',
            page:1,//分页
            flag:true,//防抖
        }
    },
    onShow() {
        this.init()
        this.page = 1
    },
    onReachBottom() {
        if (this.flag) {
            this.init()
        } else {
            this.flag = false
        }
    },
    methods: {
        jionHouse(item) {
            uni.navigateTo({
                url: '/housingfolder/Fuyuri?room_id=' + item.id
            })
        },
        searchBtn() {
            this.page = 1
            this.init()
        },
        init() {
            let data = {
                search: this.keyword,
                page:this.page
            }
            this.$Request.get(this.$api.house.welfareRoomList, data).then((res) => {
                var roomList = res.data.list
                    this.page++
                    this.roomList = this.roomList.concat(roomList);// 拼接回来的数据
                    // 当回来的数据小于十条得时候 不让再请求了 否则继续请求
                    if (roomList.length < 20) {
                        this.flag = false
                    } else {
                        this.flag = true
                    }
            })
        },
        // 创建房间
        funBtn(item) {
            if (item.id == 4) {
                this.$Request.get(this.$api.house.welfareKefu).then(res => {
                    this.kefuImage = res.data.qiyecode
                    this.$refs.kefuTc.open()
                })

            } else {
                uni.navigateTo({
                    url: item.url
                })
            }

        },
        zdlbBtn() {
            this.$refs.kefuTc.close()
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: #262626;
    padding-top: 30rpx;

    .search_box {
        width: 693rpx;
        height: 80rpx;
        background: #393834;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        border: 1rpx solid #D8D6AF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        top: 30rpx;
        left: 0;
        right: 0;
        z-index: 2;
        margin: auto;

        .search_left_box {
            width: 580rpx;
            height: 76rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;

            /deep/ .u-icon__icon {
                display: none;
            }

            /deep/.u-input {
                color: #fff !important;
            }
        }

        .search_rt_box {
            width: 100rpx;
            height: 76rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            text-align: center;
            line-height: 76rpx;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }

    .contions_box {
        width: 693rpx;
        margin: auto;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .contions_one_box {
            width: 339rpx;
            height: 431rpx;
            background: #393834;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            border: 1rpx solid #D8D6AF;
            margin-bottom: 15rpx;

            .top_box {
                width: 100%;
                height: 120rpx;
                display: flex;
                justify-content: center;
                align-items: flex-end;
                position: relative;
                margin-bottom: 18rpx;

                .official_box {
                    width: 45rpx;
                    height: 28rpx;
                    border-radius: 6rpx 6rpx 6rpx 6rpx;
                    opacity: 1;
                    border: 1rpx solid #F8B857;
                    text-align: center;
                    line-height: 26rpx;
                    position: absolute;
                    top: 16rpx;
                    right: 16rpx;
                    font-size: 16rpx;
                    font-family: Microsoft YaHei-Light, Microsoft YaHei;
                    font-weight: 300;
                    color: #F8B857;
                }

                .header_box {
                    width: 90rpx;
                    height: 90rpx;
                    border-radius: 50%;
                    background-color: #fff;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }

            .house_name_box {
                width: 100%;
                height: 37rpx;
                font-size: 28rpx;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #FCFCFC;
                line-height: 36rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                text-align: center;
                margin-bottom: 27rpx;
            }

            .house_flame_box {
                width: 100%;
                height: 36rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 18rpx;

                .flame_box {
                    width: 48%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-end;

                    .house_flame_image_box {
                        width: 32rpx;
                        height: 32rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .house_flame_text_box {
                        height: 29rpx;
                        font-size: 22rpx;
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #A4A4A4;
                        line-height: 36rpx;
                        margin-left: 7rpx;
                    }
                }

                .sm_box {
                    width: 48%;
                    height: 100%;
                    display: flex;
                    justify-content: flex-start;

                    .box_image_box {
                        width: 32rpx;
                        height: 32rpx;
                        margin-right: 7rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .box_text_box {
                        height: 29rpx;
                        font-size: 22rpx;
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #A4A4A4;
                        line-height: 36rpx;
                    }
                }
            }

            .garden_box {
                width: 100%;
                height: 76rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 25rpx;

                .sm_box {
                    width: 75rpx;
                    height: 75rpx;
                    border-radius: 50%;
                    border: 1rpx solid #D8D6AF;
                    margin: 0 9rpx;

                    image {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                    }
                }
            }

            .jion_box {
                width: 152rpx;
                height: 50rpx;
                background: linear-gradient(180deg, #FFE2B7 0%, #F5B143 100%);
                border-radius: 25rpx 25rpx 25rpx 25rpx;
                opacity: 1;
                margin: auto;
                text-align: center;
                line-height: 50rpx;
                font-size: 24rpx;
                font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                font-weight: 400;
                color: #393834;
            }
        }

        .bottom_box {
            width: 693rpx;
            height: 96rpx;
            background: linear-gradient(180deg, #FFE2B7 0%, #F5B143 100%);
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            opacity: 1;
            border: 1rpx solid #D8D6AF;
            position: fixed;
            bottom: 33rpx;
            left: 0;
            right: 0;
            margin: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .z_left_box {
                width: 25%;
                height: 100%;
                display: flex;
                align-items: center;

                .createRoom_box {
                    width: 100%;
                    height: 38rpx;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    line-height: 34rpx;

                    .jiahao_box {
                        width: 35rpx;
                        height: 36rpx;
                        margin-right: 9rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .create_box {
                        font-size: 22rpx;
                        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
                        font-weight: 400;
                        color: #515151;
                    }
                }
            }
        }
    }

    .kefu_box {
        width: 500rpx;
        height: 600rpx;
        background-color: #262626;
        border: 1rpx solid #D8D6AF;
        border-radius: 20rpx;

        .title_box {
            width: 100%;
            height: 100rpx;
            line-height: 100rpx;
            text-align: center;
            color: #fff;
            font-size: 26rpx;
            margin-bottom: 50rpx;
        }

        .erweima_box {
            width: 300rpx;
            height: 300rpx;
            background-color: #fff;
            margin: auto;
            margin-bottom: 40rpx;

            image {
                width: 100%;
                height: 100%;
            }
        }

        .wzd_box {
            width: 200rpx;
            height: 60rpx;
            border-radius: 20rpx;
            background: linear-gradient(180deg, #FFE2B7 0%, #F5B143 100%);
            margin: auto;
            text-align: center;
            line-height: 60rpx;
            font-size: 30rpx;
            color: #333;
        }
    }
}
</style>